<template>
    <div>
        <Navbar title="物流状态" left-text="返回" left-arrow @click-left="goBack">
        </Navbar>

        <van-cell-group class="header">
            <van-cell icon="logistics">
                <template #title>
                    <div class="title">
                        取件请出示邮箱 {{ user.email }}
                    </div>
                </template>
                <template #label>
                    <div class="tips">丰巢快递柜</div>
                </template>
            </van-cell>
        </van-cell-group>

        <van-cell-group class="main">
            <van-cell>
                <template #title>
                    <div class="title">
                        <img :src="Product.cover_cdn" :alt="Product.name" width="30">
                        <span>{{ express.name }}快递:{{ Order.expcode }}</span>
                    </div>
                </template>
            </van-cell>

            <van-cell :title="express.name + '快递派件员'" icon="manager-o">
                <template #value>
                    <van-button type="primary" size="mini">拨打电话</van-button>
                </template>
            </van-cell>

            <van-cell :title="'订单编号： ' + Order.code" icon="logistics" :label="Order.region_text">
            </van-cell>

        </van-cell-group>

        <div class="mt">
            <van-steps direction="vertical" :active="Order.status">
                <van-step v-for="(item, index) in steps" :key="item.id">
                    <p>{{ item.text }}</p>
                </van-step>
            </van-steps>
        </div>
    </div>
</template>
<script>
import Navbar from '../Navbar.vue';
export default {
    name: 'Express',
    data() {
        return {
            orderid: this.$route.query.orderid ? this.$route.query.orderid : 0,
            Order: {},
            OrderProduct: {},
            Product: {},
            user: {},
            express: {},
            list: [
                { id: 1, text: '用户已支付订单，等待商家发货' },
                { id: 2, text: '商家已发货，等待快递公司揽收' },
                { id: 3, text: '用户已收货成功，待评价' },
                { id: 4, text: '用户已评价' },
                { id: -1, text: '用户申请退货' },
                { id: -2, text: '订单退货中' },
                { id: -3, text: '商家拒绝退货' },
            ],
            steps: []
        }
    },
    methods: {
        goBack() {
            this.$router.go(-1);
        },
        async initOrderInfo() {
            let res = await this.$api.initOrderInfo({ orderid: this.orderid });
            console.log(res.data);
            if (res.code === 1) {
                this.Order = res.data.Order
                this.OrderProduct = res.data.OrderProduct
                this.user = res.data.Order.user
                this.express = res.data.Order.express
                this.Product = res.data.OrderProduct[0].product
                console.log(this.Product);

                if (res.data.Order.status > 0) {
                    this.list.forEach(element => {
                        if (element.id > 0) {
                            if (element.id <= res.data.Order.status) {
                                this.steps.push(element)
                            }
                        }
                    });
                } else {
                    this.list.forEach(element => {
                        if (element.id >= res.data.Order.status) {
                            this.steps.push(element)
                        }
                    });
                }

                console.log(this.steps);
            } else {
                console.log(res.msg);
            }
        },
    },
    created() {
        this.initOrderInfo()
    },
    components: {
        Navbar
    },
};
</script>
<style scoped>
.header :deep(.van-cell) {
    align-items: center;
}

.header :deep(.van-cell .van-icon) {
    margin-right: .625rem;
    font-size: 1.875rem;
}

.main .title {
    display: flex;
    align-items: center;
}

.main .title img {
    margin-right: .625rem;
}

.mt {
    margin-top: 1.25rem;
}
</style>